<template>
  <div class="index-container">
    <div class="main-header">
      <el-row>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-button
            type="primary"
            icon="el-icon-plus"
            class="sureBtn"
            size="medium"
            @click="handleAdd"
          >
            新 增
          </el-button>
          <el-button
            type="success"
            icon="el-icon-search"
            class="sureBtn"
            size="medium"
            @click="handleCheck"
          >
            编辑/查看
          </el-button>
          <el-button
            type="danger"
            class="setBtn"
            icon="el-icon-delete"
            size="medium"
            @click="handleDelete"
          >
            删 除
          </el-button>
        </el-col>
        <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16"></el-col>
      </el-row>
    </div>
    <div class="main-content">
      <app-table
        :page-data="pageData"
        :table-columns="tableColumns"
        @current-change="handleCurrentChange"
        @handleCheckedRows="handleCheckedRows"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="editRow(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            size="mini"
            type="success"
            @click="delRow(scope.row)"
          >
            删除
          </el-button>
        </template>
      </app-table>
    </div>
    <el-dialog
      title="餐饮费用"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="closeDialog"
      :append-to-body="true"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          size="medium"
        >
          <el-row>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <el-form-item label="餐饮类型" prop="type_name">
                <el-input v-model="ruleForm.type_name" placeholder="请输入餐饮类型"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <el-form-item label="老者类型" prop="name">
                 <el-select
                  v-model="ruleForm.name"
                  size="medium"
                  clearable
                  placeholder="请选择老者类型"
                  filterable
                  style="width: 100%;"
                >
                  <el-option :key="0" label="低塘（糖尿病）" :value="'1'"></el-option>
                  <el-option :key="2" label="痛风" :value="'2'"></el-option>
                  <el-option :key="3" label="低钠（高血压）" :value="'3'"></el-option>
                  <el-option :key="4" label="营养餐" :value="'4'"></el-option>
                  <el-option :key="5" label="普通餐" :value="'5'"></el-option>
                </el-select>
                <!-- <el-input v-model="ruleForm.name" placeholder="请输入老者类型"></el-input> -->
              </el-form-item>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <el-form-item label="餐饮费用" prop="price">
                <el-input v-model="ruleForm.price" type="number" placeholder="请输入餐饮费用"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="备注" prop="content">
                <div v-if="hidden" style="position: relative;">
                  <VueUeditorWrap
                    v-model="ruleForm.content" 
                    :config="editorConfig" 
                    @ready="ready"
                  />
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="form-footer">
          <el-button type="primary" class="sureBtn" size="medium" @click="save">
            提 交
          </el-button>
          <el-button
            type="info"
            class="setBtn"
            size="medium"
            @click="cancel('ruleForm')"
          >
            重 置
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import appTable from "@/components/AppTable/index";
  import { getList } from "@/api/foodcost";
  import VueUeditorWrap from 'vue-ueditor-wrap'
  export default {
    name: "Index",
    components: { appTable, VueUeditorWrap },
    data() {
      return {
        key: Math.random(),
        dialogVisible: false,
        ruleForm: {
          content: ""
        },
        rules: {
          type_name: [
            { required: true, message: "请输入餐饮等级", trigger: "blur" },
          ],
          name: [
            { required: true, message: "请输入老者类型", trigger: "blur" },
          ],
          price: [
            { required: true, message: "请输入餐饮费用", trigger: "blur" },
          ],
        },
        currentSelectedData: [],
        pageData: {},
        selectForm: {},
        dataPickerBeforeTodayOptions: {
          disabledDate(time) {
            // return time.getTime() > Date.now();
          },
        },
        tableColumns: [
          { prop: "type_name", label: "餐饮类型" },
          { prop: "name", label: "老者类型", formatter: this.statusFormatter },
          { prop: "price", label: "餐饮费用" },
        ],
        hidden: false,
        // 简单配置
        editorConfig: {
          // // 编辑器不自动被内容撑高
          // autoHeightEnabled: false,
          // // 初始容器高度
          // initialFrameHeight: 300,
          //默认的编辑区域高度
          initialFrameHeight:300,
          // // 初始容器宽度
          // initialFrameWidth: '100%',
          // toolbars:[['fullscreen', 'source', 'undo', 'redo'],
          // ['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc']
          // ],  
          toolleipi: true,
          UEDITOR_HOME_URL: '/UEditorForm/',
          serverUrl: '//ueditor.szcloudplus.com/cos',
        },
        editorInstance: null
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.getTableData();
    },
    methods: {
      statusFormatter(row) {
        if(row.name == 1) {
          return "低塘（糖尿病）"
        } else if(row.name == 2) {
          return "痛风"
        } else if(row.name == 3) {
          return "低钠（高血压）"
        } else if(row.name == 4){
          return "营养餐"
        }
        return row.name
      },
      ready(editorInstance) {
        // this.editorInstance = editorInstance;
        // 这里可以拿到ueditor的实例，比如editorInstance.getContent()就可以拿到编辑器的html内容
        console.log(`编辑器实例${editorInstance.key}: `, editorInstance);
        // editorInstance.setContent(`<p>下列为模板请根据需要更改模板</p><table data-sort="sortDisabled"><tbody><tr class="firstRow"><td width="218" valign="top" style="word-break: break-all;" align="center" class="selectTdClass">                低糖（糖尿病）<br/></td><td width="218" valign="top" align="center" style="word-break: break-all;" class="selectTdClass">                主食</td><td width="218" valign="top" align="center" style="word-break: break-all;" class="selectTdClass">                副食菜品</td><td width="218" valign="top" align="center" style="word-break: break-all;" class="selectTdClass">                粥/汤类</td></tr><tr><td width="218" valign="middle" align="center" rowspan="2" colspan="1" style="word-break: break-all;">                早餐<br/></td><td width="218" valign="top" align="center" style="word-break: break-all;"><span style="font-size: 14px;">主食:西葫芦饼/杂粮谩头</span></td><td width="218" valign="top" align="center" style="word-break: break-all;" rowspan="2" colspan="1"><span style="text-align: -webkit-center;"></span><span style="text-align: -webkit-center; font-size: 14px;">小菜:珥菠菜/菜椒腐竹</span><span style="font-size: 12px; text-align: -webkit-center;"><br/></span></td><td width="218" valign="top" align="center" style="word-break: break-all;" rowspan="2" colspan="1"><span style="font-size: 14px;">玉米胡萝卜粥/黑</span></td></tr><tr><td width="218" valign="top" align="center" style="word-break: break-all;"><span style="font-size: 14px;">副食:鸡蛋/蛋羹</span></td></tr><tr><td width="218" valign="top" align="center" style="word-break: break-all;">                中餐</td><td width="218" valign="top" align="center" style="word-break: break-all;">                高粱谩头/绿豆米饭</td><td width="218" valign="top" align="center" style="word-break: break-all;"><p>                    西篮花炒虾仁/粉蒸排骨</p><p>                    /上汤娃娃菜/清炒四季豆</p></td><td width="218" valign="top" align="center" style="word-break: break-all;">                豆腐肉丸汤</td></tr><tr><td width="218" valign="top" align="center" style="word-break: break-all;">                晚餐</td><td width="218" valign="top" align="center" style="word-break: break-all;">                杂粮漫头/杂面花卷</td><td width="218" valign="top" align="center" style="word-break: break-all;">                香菇炒青菜/家常豆腐</td><td width="218" valign="top" align="center" style="word-break: break-all;">                枸杞燕麦粥/莲子大米杂粮粥</td></tr><tr><td width="218" valign="top" align="center" style="word-break: break-all;">                加餐:◎有◎无</td><td width="218" valign="top" align="center"></td><td width="218" valign="top" align="center"></td><td width="218" valign="top" align="center"></td></tr><tr><td width="218" valign="top" align="center" style="word-break: break-all;">                费用(元)</td><td width="218" valign="top" align="center" style="word-break: break-all;">                1000</td><td valign="top" align="center" style="word-break: break-all;" rowspan="1" colspan="2">                状态:◎正常◎停供</td></tr><tr><td valign="top" align="center" style="word-break: break-all;" rowspan="1" colspan="4">                备注说明:每日食盐不超过6G,食用油不超过25G,不用味精。</td></tr></tbody></table><p><br/></p>			`)
      },
      getTableData(data) {
        getList("get", data).then((resp) => {
          if (resp.code === 200) {
            this.pageData = resp.data;
            this.$set(this.pageData, "isPage", true);
            this.$set(this.pageData, "type", -1);
          }
        });
      },
      editRow(row) {
        this.hidden = true;
        this.dialogVisible = true;
        let content = row.content || `<p >下列为模板请根据需要更改模板</p><table data-sort=sortDisabled><tbody><tr class=firstRow><td width=218 valign=top style=word-break:break-all align=center >低糖（糖尿病）<br><td width=218 valign=top align=center style=word-break:break-all >主食<td width=218 valign=top align=center style=word-break:break-all >副食菜品<td width=218 valign=top align=center style=word-break:break-all >粥/汤类<tr><td width=218 valign=middle align=center rowspan=2 colspan=1 style=word-break:break-all >早餐<br><td width=218 valign=top align=center style=word-break:break-all ><span style=font-size:14px>主食:西葫芦饼/杂粮谩头</span><td width=218 valign=top align=center style=word-break:break-all rowspan=2 colspan=1 ><span style=text-align:-webkit-center></span><span style=text-align:-webkit-center;font-size:14px>小菜:珥菠菜/菜椒腐竹</span><span style=font-size:12px;text-align:-webkit-center><br></span><td width=218 valign=top align=center style=word-break:break-all rowspan=2 colspan=1 ><span style=font-size:14px>玉米胡萝卜粥/黑</span><tr><td width=218 valign=top align=center style=word-break:break-all ><span style=font-size:14px>副食:鸡蛋/蛋羹</span><tr><td width=218 valign=top align=center style=word-break:break-all >中餐<td width=218 valign=top align=center style=word-break:break-all >高粱谩头/绿豆米饭<td width=218 valign=top align=center style=word-break:break-all><p >西篮花炒虾仁/粉蒸排骨</p><p >/上汤娃娃菜/清炒四季豆</p><td width=218 valign=top align=center style=word-break:break-all >豆腐肉丸汤<tr><td width=218 valign=top align=center style=word-break:break-all >晚餐<td width=218 valign=top align=center style=word-break:break-all >杂粮漫头/杂面花卷<td width=218 valign=top align=center style=word-break:break-all >香菇炒青菜/家常豆腐<td width=218 valign=top align=center style=word-break:break-all >枸杞燕麦粥/莲子大米杂粮粥<tr><td width=218 valign=top align=center style=word-break:break-all >加餐：<span leipiplugins=checkboxs title=加餐><input name=leipiNewField value=有 checked type="checkbox">有&nbsp;<input name=leipiNewField value=无 type="checkbox">无</span><td width=218 valign=top align=center ><td width=218 valign=top align=center ><td width=218 valign=top align=center ><tr><td width=218 valign=top align=center style=word-break:break-all >费用(元)<td width=218 valign=top align=center style=word-break:break-all >1000<td valign=top align=center style=word-break:break-all rowspan=1 colspan=2 >状态：<span leipiplugins=checkboxs title=状态><input name=leipiNewField value=正常 checked type="checkbox">正常&nbsp;<input name=leipiNewField value=停供 type="checkbox">停供</span><tr><td valign=top align=center style=word-break:break-all rowspan=1 colspan=4 >。备注说明:每日食盐不超过6G,食用油不超过25G,不用味精。</table><p><br></p><p><br></p>`;
        this.ruleForm = Object.assign({}, row, {content});
      },
      delRow(row) {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              let param = {
                id: row.id,
              };
              getList("delete", param).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "删除成功!",
                  });
                  this.getTableData();
                }
              });
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
      },
      save() {
        this.$refs["ruleForm"].validate(async (valid) => {
          if (valid) {
            if (this.ruleForm.id) {
              getList("put", this.ruleForm).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "修改成功",
                  });
                  this.cancel();
                  this.getTableData();
                }
              });
            } else {
              getList("post", this.ruleForm).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "添加成功",
                  });
                  this.cancel();
                  this.getTableData();
                }
              });
            }
          }
        });
      },
      cancel(formName) {
        this.dialogVisible = false;
        this.$refs["ruleForm"].resetFields();
      },
      handleAdd() {
        this.dialogVisible = true;
        this.hidden = true;
        let content = `<p >下列为模板请根据需要更改模板</p><table data-sort=sortDisabled><tbody><tr class=firstRow><td width=218 valign=top style=word-break:break-all align=center >低糖（糖尿病）<br><td width=218 valign=top align=center style=word-break:break-all >主食<td width=218 valign=top align=center style=word-break:break-all >副食菜品<td width=218 valign=top align=center style=word-break:break-all >粥/汤类<tr><td width=218 valign=middle align=center rowspan=2 colspan=1 style=word-break:break-all >早餐<br><td width=218 valign=top align=center style=word-break:break-all ><span style=font-size:14px>主食:西葫芦饼/杂粮谩头</span><td width=218 valign=top align=center style=word-break:break-all rowspan=2 colspan=1 ><span style=text-align:-webkit-center></span><span style=text-align:-webkit-center;font-size:14px>小菜:珥菠菜/菜椒腐竹</span><span style=font-size:12px;text-align:-webkit-center><br></span><td width=218 valign=top align=center style=word-break:break-all rowspan=2 colspan=1 ><span style=font-size:14px>玉米胡萝卜粥/黑</span><tr><td width=218 valign=top align=center style=word-break:break-all ><span style=font-size:14px>副食:鸡蛋/蛋羹</span><tr><td width=218 valign=top align=center style=word-break:break-all >中餐<td width=218 valign=top align=center style=word-break:break-all >高粱谩头/绿豆米饭<td width=218 valign=top align=center style=word-break:break-all><p >西篮花炒虾仁/粉蒸排骨</p><p >/上汤娃娃菜/清炒四季豆</p><td width=218 valign=top align=center style=word-break:break-all >豆腐肉丸汤<tr><td width=218 valign=top align=center style=word-break:break-all >晚餐<td width=218 valign=top align=center style=word-break:break-all >杂粮漫头/杂面花卷<td width=218 valign=top align=center style=word-break:break-all >香菇炒青菜/家常豆腐<td width=218 valign=top align=center style=word-break:break-all >枸杞燕麦粥/莲子大米杂粮粥<tr><td width=218 valign=top align=center style=word-break:break-all >加餐：<span leipiplugins=checkboxs title=加餐><input name=leipiNewField value=有 checked type="checkbox">有&nbsp;<input name=leipiNewField value=无 type="checkbox">无</span><td width=218 valign=top align=center ><td width=218 valign=top align=center ><td width=218 valign=top align=center ><tr><td width=218 valign=top align=center style=word-break:break-all >费用(元)<td width=218 valign=top align=center style=word-break:break-all >1000<td valign=top align=center style=word-break:break-all rowspan=1 colspan=2 >状态：<span leipiplugins=checkboxs title=状态><input name=leipiNewField value=正常 checked type="checkbox">正常&nbsp;<input name=leipiNewField value=停供 type="checkbox">停供</span><tr><td valign=top align=center style=word-break:break-all rowspan=1 colspan=4 >。备注说明:每日食盐不超过6G,食用油不超过25G,不用味精。</table><p><br></p><p><br></p>`;
        this.ruleForm = Object.assign({}, {content});
      },
      handleCheck() {
        this.key = Math.random();
        if (this.currentSelectedData.length === 0) {
          this.$message({
            message: "请选择一条您要查看的内容",
            type: "warning",
          });
        } else if (this.currentSelectedData.length > 1) {
          this.$message({
            message: "一次只能查看一条内容",
            type: "warning",
          });
        } else {
          this.dialogVisible = true;
          this.hidden = true;
          this.$nextTick(() => {
            let content = this.currentSelectedData[0].content || `<p >下列为模板请根据需要更改模板</p><table data-sort=sortDisabled><tbody><tr class=firstRow><td width=218 valign=top style=word-break:break-all align=center >低糖（糖尿病）<br><td width=218 valign=top align=center style=word-break:break-all >主食<td width=218 valign=top align=center style=word-break:break-all >副食菜品<td width=218 valign=top align=center style=word-break:break-all >粥/汤类<tr><td width=218 valign=middle align=center rowspan=2 colspan=1 style=word-break:break-all >早餐<br><td width=218 valign=top align=center style=word-break:break-all ><span style=font-size:14px>主食:西葫芦饼/杂粮谩头</span><td width=218 valign=top align=center style=word-break:break-all rowspan=2 colspan=1 ><span style=text-align:-webkit-center></span><span style=text-align:-webkit-center;font-size:14px>小菜:珥菠菜/菜椒腐竹</span><span style=font-size:12px;text-align:-webkit-center><br></span><td width=218 valign=top align=center style=word-break:break-all rowspan=2 colspan=1 ><span style=font-size:14px>玉米胡萝卜粥/黑</span><tr><td width=218 valign=top align=center style=word-break:break-all ><span style=font-size:14px>副食:鸡蛋/蛋羹</span><tr><td width=218 valign=top align=center style=word-break:break-all >中餐<td width=218 valign=top align=center style=word-break:break-all >高粱谩头/绿豆米饭<td width=218 valign=top align=center style=word-break:break-all><p >西篮花炒虾仁/粉蒸排骨</p><p >/上汤娃娃菜/清炒四季豆</p><td width=218 valign=top align=center style=word-break:break-all >豆腐肉丸汤<tr><td width=218 valign=top align=center style=word-break:break-all >晚餐<td width=218 valign=top align=center style=word-break:break-all >杂粮漫头/杂面花卷<td width=218 valign=top align=center style=word-break:break-all >香菇炒青菜/家常豆腐<td width=218 valign=top align=center style=word-break:break-all >枸杞燕麦粥/莲子大米杂粮粥<tr><td width=218 valign=top align=center style=word-break:break-all >加餐：<span leipiplugins=checkboxs title=加餐><input name=leipiNewField value=有 checked type="checkbox">有&nbsp;<input name=leipiNewField value=无 type="checkbox">无</span><td width=218 valign=top align=center ><td width=218 valign=top align=center ><td width=218 valign=top align=center ><tr><td width=218 valign=top align=center style=word-break:break-all >费用(元)<td width=218 valign=top align=center style=word-break:break-all >1000<td valign=top align=center style=word-break:break-all rowspan=1 colspan=2 >状态：<span leipiplugins=checkboxs title=状态><input name=leipiNewField value=正常 checked type="checkbox">正常&nbsp;<input name=leipiNewField value=停供 type="checkbox">停供</span><tr><td valign=top align=center style=word-break:break-all rowspan=1 colspan=4 >。备注说明:每日食盐不超过6G,食用油不超过25G,不用味精。</table><p><br></p><p><br></p>`;
            this.ruleForm = Object.assign({}, this.currentSelectedData[0], {content});
          })
        }
      },
      handleDelete() {
        if (this.currentSelectedData.length === 0) {
          this.$message({
            message: "请选择一条您要删除的内容",
            type: "warning",
          });
        } else if (this.currentSelectedData.length > 1) {
          this.$message({
            message: "一次只能删除一条内容",
            type: "warning",
          });
        } else {
          this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.ruleForm = Object.assign({}, this.currentSelectedData[0]);
              let param = {
                id: this.ruleForm.id,
              };
              getList("delete", param).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "删除成功!",
                  });
                  this.getTableData();
                }
              });
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
        }
      },
      handleCheckedRows(rows) {
        if (rows && rows instanceof Array && rows.length > 0) {
          this.currentSelectedData = rows;
        } else {
          this.currentSelectedData = [];
        }
      },
      handleCurrentChange(val) {
        let param = {
          page: val,
        };
        this.getTableData(param);
      },
      closeDialog() {
        this.dialogVisible = false;
        this.hidden = false;
        this.$refs["ruleForm"].resetFields();
      },
    },
  };
</script>
<style lang="scss" scoped>
  .index-container {
    box-sizing: border-box;
    width: 100%;
    padding: 0 30px !important;
    margin: 0 !important;
    background: #fff !important;

    .main-header {
      padding-top: 4px;
      margin-bottom: 24px;

      .search {
        width: 100%;

        .search-title {
          flex: 0 0 48px;
          width: 48px;
          font-size: 16px;
          line-height: 36px;
          color: #333;
        }
      }
    }

    .form-footer {
      padding-left: 100px;
    }
  }
</style>
